<template>
  <div>
        <div class="left">
        <div class="left-header">
            <div class="self">
              <i class="fa fa-user-circle-o fa-5x" aria-hidden="true"></i>
            </div>
            <p class="p1">{{username}}</p>
            <p @click="showself" class="p2"><a >{{username}}</a><i class="fa fa-angle-down" aria-hidden="true"></i></p>
            <router-link to='/'>
            <div class="divShowself" v-show="divShowself">
              <p>安全退出</p>
            </div>
            </router-link>
        </div>
        <div class="left-content">
            <div class="bumen">
                <div @click="show" id="b-button" class="chaidan">
                    <span>
                      <i class="fa fa-address-card-o" aria-hidden="true"></i>
                    </span>
                    <a>部门管理</a>
                    <span class="iconfont">&#xe624;</span>
                </div>
                <div id="bumen-caidan" v-show="divShow">
                    <div>
                      <router-link to='/adddep'>
                        <p> 添加部门</p>
                      </router-link>
                       <router-link to='/depint'>
                        <p> 部门信息</p>
                      </router-link>
                    </div>
                </div>
            </div>
            <div class="yuangong">
                <div @click="yshow" id="b-button" class="chaidan">
                    <span>
                      <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                    </span>
                    <a>员工管理</a>
                    <span class="iconfont">&#xe624;</span>
                </div>
                <div id="bumen-caidan" v-show="ydivShow">
                    <div>
                      <router-link to='/employee'>
                        <p>员工列表</p>
                      </router-link>
                      <router-link to='/employee'>
                        <p>添加员工</p>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>

</template>

<script>
  import HomeLogin from '../../longin/Logins.vue'
export default {
     name:'HomeLeftall',
     data() {              
    return {
      username:"",
      divShow :false, 
      detailShow: false,        
      ydivShow :false, 
      ydetailShow: false,
      divShowself:false,
      detailShowself: false,  
          }
      },
      conponents:{
        HomeLogin
      },
      created(){
    this.username = this.$cookieStore.getCookie('user');
  },
     methods: {
        show() {
            this.detailShow=!this.detailShow
            if (this.detailShow) {
                this.divShow = false ;
            }else{
              this.divShow = true;         //show方法
            }
        },
        yshow() {
            this.ydetailShow=!this.ydetailShow
            if (this.ydetailShow) {
                this.ydivShow = false ;
            }else{
              this.ydivShow = true;         //show方法
            }
        },
        showself(){
          this.detailShowself=!this.detailShowself
            if (this.detailShowself) {
                this.divShowself = false ;
            }else{
              this.divShowself = true;         //show方法
            }
        }
      }


}
</script>
<style >
   .left{
    float: left;
    position: absolute;
    width: 4rem;
    height: 100%;
    background-color:  #057fca;
    margin-top: -40px;
   }
   .left-header{
    position: relative;
    height: 4rem;
    background-color: #233444;
   }
   .divShowself{
    width: 3rem;
    height: 1rem;
    position: absolute;
    top: 4rem;
    left: .5rem;
    text-align: center;
    line-height: 1rem;
    background-color: #fff;
   }
  .left-header .p1{
    color: #fff;
    position: absolute;
    top: 80%;
    left: 9%;
   }
   .left-header .p2{
    color: #fff;
    position: absolute;
    top: 88%;
    left: 9%;
   }
   .self{
    position: absolute;
    top: 40%;
    left: 9%;
    width: 1.4rem;
    height: 1.4rem;
    color: #057fca;
    border-radius: 50%;
   }
   .left-content{
    margin-top: 1.6rem;
   }
   .chaidan{
    position: relative;
   }
   .chaidan a{
      font-size: 16px;
      color: #999;
      margin-left: .3rem;

   }
   .chaidan span {
    margin-left: 1rem;
    color: #fff;
   }
   .chaidan .iconfont{
    position: absolute;
    right: 4px;
    color: #fff;
    font-size: 12px;
   }
   #bumen-caidan p{
    margin-top: 20px;
    color: #999;
    margin-left: 40px;
   }
   .yuangong{
    margin-top: 30px;
   }
</style>